import React, { useState } from 'react';
import { Table, Pagination, ConfigProvider, Space, Select } from 'antd';
import './index.css';
import zhCN from 'antd/lib/locale-provider/zh_CN';
export default function MyTable(prop) {
  // -------------------------
  // table的一些配置
  /**
   * 判断是否是分类或者操作传入的值是classify或者handle
   */
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const onSelectChange = (newSelectedRowKeys) => {
    setSelectedRowKeys(newSelectedRowKeys);
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  if (prop.classify) {
    prop.columns.push({
      title: '分类',
      key: 'classify',
      render: (_, record) => (
        <>
          <Select
            defaultValue="分类"
            style={{
              width: 120,
            }}
            onChange={handleChange}
          >
            {prop.ClassifyContent.map((item, index) => {
              return (
                <Option value={item} key={index}>
                  {item}
                </Option>
              );
            })}
          </Select>
        </>
      ),
    });
  } else if (prop.handle) {
    prop.columns.push({
      title: '操作',
      key: 'active',
      render: (_, record) => (
        <>
          <Space>
            {prop.content.map((item, index) => {
              return <span key={index}>{item}</span>;
            })}
          </Space>
        </>
      ),
    });
  }
  // -------------------------
  // 分页
  /**
   * onChange 这是分页改变时使用的方法
   */
  const onChange = (pageNumber) => {
    console.log('Page: ', pageNumber);
  };
  // -------------------------
  // 下拉框
  /**
   * Opetion 他是antd中Select自带的但是需要另外引入
   * handleChange 这是Select中 当值变化时使用的方法
   */
  const { Option } = Select;

  const handleChange = (value) => {
    console.log(`selected ${value}`);
  };

  return (
    <div className="flex-center TableMain">
      <div className="width-height-100">
        <div className="flex-center">
          <Table
            rowSelection={prop.AllTheSelected === true ? rowSelection : null}
            columns={prop.columns}
            dataSource={prop.data}
            pagination={false}
            rowKey={prop.data.key}
          />
        </div>
        <div className="width-height-100 flex-center pagination">
          <ConfigProvider locale={zhCN}>
            <Pagination
              total={prop.totalnum}
              showTotal={(total) => `共 ${total} 条数据`}
              defaultPageSize={5}
              defaultCurrent={1}
              pageSizeOptions={['5', '10', '15', '20']}
              showSizeChanger
              showQuickJumper
              onChange={onChange}
            />
          </ConfigProvider>
        </div>
      </div>
    </div>
  );
}
